<template>
  <view class="guide-bg">
    <swiper
      class="guide-swiper"
      :current="current"
      @change="onChange"
      :circular="false"
      :autoplay="false"
      interval="3000"
      duration="400"
    >
      <swiper-item>
        <view class="guide-page">
          <text class="guide-title">找工作</text>
          <text class="guide-subtitle">高薪不加班、事业编、包落户，统统有。</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="guide-page">
          <text class="guide-title">练面试</text>
          <text class="guide-subtitle">AI助手模拟面试，学长学姐专人指导。</text>
        </view>
      </swiper-item>
    </swiper>
    <view class="guide-indicator">
      <view v-for="(item, idx) in 2" :key="idx" class="dot" :class="{active: idx === current}" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      timer: null,
      hasJumped: false
    }
  },
  methods: {
    onChange(e) {
      this.current = e.detail.current;
      // 只在第一次到第二屏时触发跳转
      if (this.current === 1 && !this.hasJumped) {
        this.hasJumped = true;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          uni.redirectTo({ url: '/pages/index/login' });
        }, 2000);
      } else if (this.current === 0) {
        clearTimeout(this.timer);
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
}
</script>

<style scoped>
.guide-bg {
  width: 100vw;
  height: 100vh;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.guide-swiper {
  width: 100vw;
  height: 100vh;
}
.guide-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 60rpx;
  box-sizing: border-box;
}
.guide-title {
  color: #222;
  font-size: 60rpx;
  font-weight: 800;
  margin-top: 120rpx;
  margin-bottom: 48rpx;
  letter-spacing: 2rpx;
  text-align: center;
}
.guide-subtitle {
  color: #666;
  font-size: 32rpx;
  line-height: 48rpx;
  text-align: center;
  margin-bottom: 320rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.guide-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32rpx;
}
.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #e0e0e0;
  transition: background 0.3s, transform 0.3s;
}
.dot.active {
  background: #00B386;
  transform: scale(1.2);
}
</style> 